<template>
  <div class="com-container" ref="chart">
    <div ref="chart" class="com-chart">压力水平与睡眠质量柱状图</div>
  </div>
</template>

<script>
import { markRaw } from 'vue';
import * as echarts from 'echarts'
require('echarts/theme/dark');
export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
      startValue: 0,
      endValue: 4,
      timeId: null,
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed() {
    clearInterval(this.timeId)
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    initChart() {
      this.chartInstance = markRaw(echarts.init(this.$refs.chart, 'dark'))
      const initOption = {
        title: {
          text: '▎ 每日步数与睡眠持续时间柱状图',
          left: 8,
          top: 8,
        },
        grid: {
          top: '20%',
          left: '5%',
          right: '5%',
          bottom: '3%',
          containLabel: true // 距离是包含坐标轴上的文字
        },
        tooltip: {
          show: true,
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          max: 7.3,
          min: 6.7,
          axisLine: {
            show: true,
            lineStyle: {
              type: 'solid' // 坐标轴线的类型，可以是 'solid', 'dashed', 'dotted'
            }
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            // lineStyle: {
            //   type: 'dashed',
            // },
          },
        },
        series: [
          {
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              distance: 5,
              textStyle: {
                color: 'white'
              }
            },
            itemStyle: {
              // 指明颜色渐变的方向
              // 指明不同百分比之下颜色的值
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                // 百分之0状态之下的颜色值
                {
                  offset: 0,
                  color: '#2E72BF'
                },
                // 百分之100状态之下的颜色值
                {
                  offset: 1,
                  color: '#23E5E5'
                }
              ])
            }
          }
        ]
      }
      this.chartInstance.setOption(initOption)
    },
    async getData() {
      const { data: ret } = await this.$axios.get('chart4')
      this.allData = ret
      this.updataChart()
      this.startInterval()
    },
    updataChart() {
      const dataOption = {
        dataZoom: {
          show: false,
          startValue: this.startValue,
          endValue: this.endValue,
        },
        xAxis: {
          data: this.allData.steps,
        },
        series: [
          {
            data: this.allData.sleep_duration,
          }
        ]
      }
      this.chartInstance.setOption(dataOption)
    },
    startInterval() {
      if (this.timeId) {
        clearInterval(this.timeId)
      }
      this.timeId = setInterval(() => {
        this.startValue++
        this.endValue++
        if (this.endValue > this.allData.steps.length - 1) {
          this.startValue = 0
          this.endValue = 4
        }
        // console.log(this.startValue + '/' + this.endValue)
        this.updataChart()
      }, 2000)
    },
    screenAdapter() {
      const titleFontSize = this.$refs.chart.offsetWidth / 100 * 3
      const fontSize = this.$refs.chart.offsetWidth / 100 * 8
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        series: [
          {
            barWidth: fontSize,
            itemStyle: {
              borderRadius: [fontSize / 2, fontSize / 2, 0, 0],
            }
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    }
  }
}

</script>

<style></style>